<template>
  <div class="app-container">
    <el-button class="btn-jy" type="primary" @click="showJyResults">
      检验结果
    </el-button>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane name="first">
        <div slot="label">
          <el-cascader
            v-model="bloodMatchType"
            class="el-cascader-match"
            collapse-tags
            :options="bloodMatchTypes"
            :props="props"
            style="width: 240px"
            @change="changeBloodMatchType"
            @focus="changeBloodMatchType"
          />
        </div>
        <index @fillMatchRecords="fillMatchRecords" />
      </el-tab-pane>
      <el-tab-pane label="配血作废" name="second">
        <invalid :active-name="activeName" />
      </el-tab-pane>
      <el-tab-pane label="配血查询" name="third">
        <search :active-name="activeName" />
      </el-tab-pane>
      <el-tab-pane label="配血结果" name="fourth">
        <result :active-name="activeName" />
      </el-tab-pane>
    </el-tabs>
    <jy ref="jy" />
  </div>
</template>

<script>
  import Index from './index/index'
  import Invalid from './invalid/index'
  import Search from './search/index'
  import Result from './result/index'
  import Jy from './jy/index'
  import { mapGetters } from 'vuex'
  import { getArrayItem } from '@/utils'
  export default {
    name: 'BloodMatchIndex',
    components: {
      Index,
      Invalid,
      Search,
      Result,
      Jy,
    },
    data() {
      return {
        activeName: localStorage.getItem('activeName') || 'first',
        bloodMatchType: localStorage.getItem('bloodMatchType') || '1卡式配血',
        bloodMatchTypeEnd: [],
        props: { value: 'id', label: 'name', multiple: true },
      }
    },
    computed: {
      ...mapGetters({ bloodMatchTypes: 'initialData/bloodMatchTypes' }),
    },
    watch: {
      activeName: {
        handler(newVal) {
          localStorage.setItem('activeName', newVal)
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      this.changeBloodMatchType(getArrayItem('bloodMatchType', [[1, 3]]))
    },
    methods: {
      showJyResults() {
        this.$refs.jy.show()
      },
      fillMatchRecords() {
        this.activeName = 'fourth'
      },
      changeBloodMatchType(val) {
        console.log(val)
        if (val.length === 0) {
          this.$message.error('请至少选择一种配血方式')
          return
        }
        // 是否与上次的类型相同
        let changeFlag = false
        // eslint-disable-next-line no-unused-vars
        let changeItem = null
        if (this.bloodMatchTypeEnd.length === 0) {
          this.bloodMatchType = val
        } else {
          // 与原数组比对
          this.bloodMatchType.forEach((item) => {
            // 与原数组的类型相同
            if (item[0] !== this.bloodMatchTypeEnd[0][0]) {
              changeFlag = true
              changeItem = item
            }
          })
        }

        if (changeFlag) {
          // 上次是system,那么这次是domain
          this.bloodMatchTypes.forEach((currentType) => {
            if (this.bloodMatchTypeEnd[0][0] === currentType.id) {
              this.bloodMatchType = this.bloodMatchType.filter((item) => {
                return item[0] !== currentType.id
              })
            }
          })
        }
        this.bloodMatchTypeEnd = this.bloodMatchType
        // setArrayItem('bloodMatchType', this.bloodMatchType)
        this.$store.commit('initialData/setBloodMatchType', this.bloodMatchType)
      },
    },
  }
</script>

<style lang="scss">
  .el-cascader-match .el-input .el-input__inner {
    border: none;
  }
</style>
<style lang="scss" scoped>
  .btn-jy {
    position: fixed;
    top: 134px;
    right: 80px;
    z-index: 999;
  }
</style>
